import React, { Component } from 'react'
import axios from "axios"
import tabAlter from './tabAlter'
export class Alter extends Component {
   constructor(props) {
     super(props)
     this.state = {
        list:[],
        active:0,
        tagflag:false,
        newArr:[]
     }
   }
   componentDidMount() { 
       axios.get("/list").then(res=>{
           this.setState({
               list:res.data,
           
           })
           
       })
    }
  render() {
      const {list,active,tagflag,newArr}=this.state
    const {closeFn,flag}=this.props
    return (
      <div>
          <div className="mask" style={
              flag ? {display:'block' } :
              {display:'none' }
        }>
            <div></div>
              <div className="con">
                  <h2>修改兴趣</h2>
                   兴趣:<div className='tag' onClick={()=>{
                   this.setState({
                       tagflag:true
                   })
                   }}> 
                      {
                          newArr.length ? newArr.map((item,index)=>{
                              return <span>{item} <b onClick={()=>{
                                  newArr.splice(index,1)

                              }}> x</b></span> 
                          }) :'暂无数据'
                      } 
                   
                   </div>
                   {/* <tabAlter></tabAlter> */}
                   <div className="tab" style={tagflag ? {display:'block'}  :{display:'none'}}>

                 
<div className="tabtitle">
  { list.length ? list.map((item,index)=>{
 return  index<=4 ? <span onClick={
     ()=>{

    this.setState({
        active:index
    })
     }

 } className={ active===index ?'active' :''  } key={item.id}>{item.title}</span> :null
}):'暂无数据'

}   
</div>
<ul className='tabcon'>
    {
        list[active] ?list[active].child.map((item)=>{
            return <li onClick={ 

                ()=>{
                    if(newArr.length>=15){
                        alert("最多15条")
                    }else{
                        newArr.push(item.user)
                        this.setState({
                            newArr
 
                 })
                    }

                  
                }
              
                   
                
                
            } className={newArr.includes(item.user) ? 'on' :''}   >{item.user}</li>
        }) :'暂无数据'
    }
</ul>
</div>
              

                  <span onClick={
                      ()=>{
                          closeFn()
                      }
                  }> x</span>
                  <button>取消</button>
                  <button>提交</button>


              </div>
          </div>
      </div>
    )
  }
}

export default Alter